<template>
  <div class="stashReportBI">
    <!-- 顶部 -->
    <header-box @changeType="changeType"></header-box>
    <div class="main bg">
      <!-- 公司物资总金额 -->
      <div class="companyAmount orange-border">
        <div class="title">
          <div>
            公司物资总金额<span style="color: #ff8000">￥{{ totalMoney.generalWarehouseAmount }}</span>
          </div>
          <div>
            <el-select v-model="dateVal1" placeholder="请选择" size="mini" @change="getCompanyAmount">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="content-box">
          <listTop8 v-for="(item, index) in companyArr" :key="index" :listData="item" :title="titleArr[index]"
            :typeVal="typeVal" @toStashReportBIItem="goStashReportBIItem(index, 0)" head="存 / 销 / 购">
          </listTop8>
        </div>
      </div>
      <!-- 项目物资总金额 -->
      <div class="projectAmount blue-border">
        <div class="title">
          <div>
            项目物资总金额<span style="color: #006fff">￥{{ totalMoney.projectWarehouseAmount }}</span>
          </div>
          <div>
            <el-select v-model="dateVal2" placeholder="请选择" size="mini" @change="getProjectAmount">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="content-box">
          <listTop8 v-for="(item, index) in projectArr" :key="index" :listData="item" :title="titleArr[index]"
            @toStashReportBIItem="goStashReportBIItem(index, 1)" :typeVal="typeVal" head="余  / 销  / 申">
          </listTop8>
        </div>
      </div>
      <!-- 个人物资总金额 -->
      <div class="personageAmount green-border">
        <div class="title">
          <div>
            个人物资总金额<span style="color: #31c072">￥{{ totalMoney.personWarehouseAmount }}</span>
          </div>
          <div>
            <el-select v-model="dateVal3" placeholder="请选择" size="mini" @change="getPersonageAmount">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="content-box">
          <listTop8 v-for="(item, index) in personageArr" :key="index" :listData="item" :title="titleArr[index]"
            :typeVal="typeVal" @toStashReportBIItem="goStashReportBIItem(index, 3)" head="余  / 销  / 领">
          </listTop8>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headerBox from "./components/header-box.vue";
import listTop8 from "./components/list-top8";
import {
  getMaterialsBIWareAmount,
  getMaterialsBICommodityTypeNumberByGeneralWare,
  getMaterialsBICommodityTypeNumberByProjectWare,
  getMaterialsBICommodityTypeNumberByPersonWare,
} from "@/api/erp/stashReportBI";

export default {
  components: { headerBox, listTop8 },
  data() {
    return {
      dateVal1: "",
      dateVal2: "",
      dateVal3: "",
      typeVal: 1,
      value: "",
      totalMoney: {},
      companyArr: [[], [], [], [], [], [], [], []],
      projectArr: [[], [], [], [], [], [], [], []],
      personageArr: [[], [], [], [], [], [], [], []],
      titleArr: [
        { text: "设备TOP 8", icon: 'BIzysb' },
        { text: "设备配件TOP 8", icon: 'BIwtzg' },
        { text: "垃圾处置TOP 8", icon: 'BIljcz' },
        { text: "客用品TOP 8", icon: 'BIkyp' },
        { text: "化学品TOP 8", icon: 'BIhxj' },
        { text: "工具TOP 8", icon: 'BIgjyp' },
        { text: "劳保TOP 8", icon: 'BIlb' },
        { text: "其他TOP 8", icon: 'BIwtzg' },

      ],
    };
  },
  mounted() {
    this.getTotalMoney();
    this.getCompanyAmount();
    this.getProjectAmount();
    this.getPersonageAmount();
  },
  computed: {
    options() {
      let currentYear = new Date().getFullYear();
      let arr = [
        { value: "", label: "全部" },
        { value: currentYear + "01", label: currentYear + "01" },
        { value: currentYear + "02", label: currentYear + "02" },
        { value: currentYear + "03", label: currentYear + "03" },
        { value: currentYear + "04", label: currentYear + "04" },
        { value: currentYear + "05", label: currentYear + "05" },
        { value: currentYear + "06", label: currentYear + "06" },
        { value: currentYear + "07", label: currentYear + "07" },
        { value: currentYear + "08", label: currentYear + "08" },
        { value: currentYear + "09", label: currentYear + "09" },
        { value: currentYear + "10", label: currentYear + "10" },
        { value: currentYear + "11", label: currentYear + "11" },
        { value: currentYear + "12", label: currentYear + "12" },
      ];
      return arr;
    },
  },
  methods: {
    goStashReportBIItem(active, type) {
      this.$router.push({ path: "/report/materialsBIItem", query: { active: +active + 1, type } });
    },
    changeType(flag) {
      this.typeVal = flag;
      this.getTotalMoney();
      this.getCompanyAmount();
      this.getProjectAmount();
      this.getPersonageAmount();
    },
    async getTotalMoney() {
      const { data: res } = await getMaterialsBIWareAmount();
      this.totalMoney = res;
    },

    async getCompanyAmount() {
      const { data: res1 } =
        await getMaterialsBICommodityTypeNumberByGeneralWare({
          typeVal: this.typeVal,
          commodityType: 26,
          dateVal: this.dateVal1,
        });
      this.companyArr.splice(0, 1, res1);
      const { data: res2 } =
        await getMaterialsBICommodityTypeNumberByGeneralWare({
          typeVal: this.typeVal,
          commodityType: 34,
          dateVal: this.dateVal1,
        });
      this.companyArr.splice(1, 1, res2);
      const { data: res3 } =
        await getMaterialsBICommodityTypeNumberByGeneralWare({
          typeVal: this.typeVal,
          commodityType: 23,
          dateVal: this.dateVal1,
        });
      this.companyArr.splice(2, 1, res3);
      const { data: res4 } =
        await getMaterialsBICommodityTypeNumberByGeneralWare({
          typeVal: this.typeVal,
          commodityType: 28,
          dateVal: this.dateVal1,
        });
      this.companyArr.splice(3, 1, res4);
      const { data: res5 } =
        await getMaterialsBICommodityTypeNumberByGeneralWare({
          typeVal: this.typeVal,
          commodityType: 22,
          dateVal: this.dateVal1,
        });
      this.companyArr.splice(4, 1, res5);
      const { data: res6 } =
        await getMaterialsBICommodityTypeNumberByGeneralWare({
          typeVal: this.typeVal,
          commodityType: 21,
          dateVal: this.dateVal1,
        });
      this.companyArr.splice(5, 1, res6);
      const { data: res7 } =
        await getMaterialsBICommodityTypeNumberByGeneralWare({
          typeVal: this.typeVal,
          commodityType: 27,
          dateVal: this.dateVal1,
        });
      this.companyArr.splice(6, 1, res7);
      const { data: res8 } =
        await getMaterialsBICommodityTypeNumberByGeneralWare({
          typeVal: this.typeVal,
          commodityType: 99,
          dateVal: this.dateVal1,
        });
      this.companyArr.splice(7, 1, res8);
    },
    async getProjectAmount() {
      const { data: res1 } =
        await getMaterialsBICommodityTypeNumberByProjectWare({
          typeVal: this.typeVal,
          commodityType: 26,
          dateVal: this.dateVal2,
        });
      this.projectArr.splice(0, 1, res1);
      const { data: res2 } =
        await getMaterialsBICommodityTypeNumberByProjectWare({
          typeVal: this.typeVal,
          commodityType: 34,
          dateVal: this.dateVal2,
        });
      this.projectArr.splice(1, 1, res2);
      const { data: res3 } =
        await getMaterialsBICommodityTypeNumberByProjectWare({
          typeVal: this.typeVal,
          commodityType: 23,
          dateVal: this.dateVal2,
        });
      this.projectArr.splice(2, 1, res3);
      const { data: res4 } =
        await getMaterialsBICommodityTypeNumberByProjectWare({
          typeVal: this.typeVal,
          commodityType: 28,
          dateVal: this.dateVal2,
        });
      this.projectArr.splice(3, 1, res4);
      const { data: res5 } =
        await getMaterialsBICommodityTypeNumberByProjectWare({
          typeVal: this.typeVal,
          commodityType: 22,
          dateVal: this.dateVal2,
        });
      this.projectArr.splice(4, 1, res5);
      const { data: res6 } =
        await getMaterialsBICommodityTypeNumberByProjectWare({
          typeVal: this.typeVal,
          commodityType: 21,
          dateVal: this.dateVal2,
        });
      this.projectArr.splice(5, 1, res6);
      const { data: res7 } =
        await getMaterialsBICommodityTypeNumberByProjectWare({
          typeVal: this.typeVal,
          commodityType: 27,
          dateVal: this.dateVal2,
        });
      this.projectArr.splice(6, 1, res7);
      const { data: res8 } =
        await getMaterialsBICommodityTypeNumberByProjectWare({
          typeVal: this.typeVal,
          commodityType: 99,
          dateVal: this.dateVal2,
        });
      this.projectArr.splice(7, 1, res8);
    },
    async getPersonageAmount() {
      const { data: res1 } =
        await getMaterialsBICommodityTypeNumberByPersonWare({
          typeVal: this.typeVal,
          commodityType: 26,
          dateVal: this.dateVal3,
        });
      this.personageArr.splice(0, 1, res1);
      const { data: res2 } =
        await getMaterialsBICommodityTypeNumberByPersonWare({
          typeVal: this.typeVal,
          commodityType: 34,
          dateVal: this.dateVal3,
        });
      this.personageArr.splice(1, 1, res2);
      const { data: res3 } =
        await getMaterialsBICommodityTypeNumberByPersonWare({
          typeVal: this.typeVal,
          commodityType: 23,
          dateVal: this.dateVal3,
        });
      this.personageArr.splice(2, 1, res3);
      const { data: res4 } =
        await getMaterialsBICommodityTypeNumberByPersonWare({
          typeVal: this.typeVal,
          commodityType: 28,
          dateVal: this.dateVal3,
        });
      this.personageArr.splice(3, 1, res4);
      const { data: res5 } =
        await getMaterialsBICommodityTypeNumberByPersonWare({
          typeVal: this.typeVal,
          commodityType: 22,
          dateVal: this.dateVal3,
        });
      this.personageArr.splice(4, 1, res5);
      const { data: res6 } =
        await getMaterialsBICommodityTypeNumberByPersonWare({
          typeVal: this.typeVal,
          commodityType: 21,
          dateVal: this.dateVal3,
        });
      this.personageArr.splice(5, 1, res6);
      const { data: res7 } =
        await getMaterialsBICommodityTypeNumberByPersonWare({
          typeVal: this.typeVal,
          commodityType: 27,
          dateVal: this.dateVal3,
        });
      this.personageArr.splice(6, 1, res7);
      const { data: res8 } =
        await getMaterialsBICommodityTypeNumberByPersonWare({
          typeVal: this.typeVal,
          commodityType: 99,
          dateVal: this.dateVal3,
        });
      this.personageArr.splice(7, 1, res8);
    },
  },
};
</script>
<style lang="scss" scoped>
.stashReportBI {
  width: 100vw;
  min-height: 100vh;
  background-color: #dee0ed;
  position: relative;

  .bg {
    background-image: url('~@/assets/images/bgBI.png');
    background-size: 100% 100%;
  }

  .main {
    height: 94vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 32px;
    box-sizing: border-box;

    >div {
      height: 30vh;
      padding: 12px 24px;
      display: flex;
      flex-direction: column;

      .title {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        margin: 0;

        span {
          font-size: 24px;
          margin-left: 18px;
        }
      }

      .content-box {
        display: flex;
        justify-content: space-between;
        margin: 0 -8px;
        flex-grow: 1;
        overflow: hidden;

        >div {
          margin: 10px 8px;
          flex: 1 1 calc(100% / 8);
        }
      }
    }
  }

  .green-border {
    border: 1px solid;
    border-image: linear-gradient(180deg,
        rgba(49, 192, 114, 0.6),
        rgba(49, 192, 114, 0)) 1 1;

    flex-shrink: 0;
    background: linear-gradient(to left, #31c072, #31c072) left top no-repeat,
      linear-gradient(to bottom, #31c072, #31c072) left top no-repeat,
      linear-gradient(to left, #31c072, #31c072) right top no-repeat,
      linear-gradient(to bottom, #31c072, #31c072) right top no-repeat,
      rgba(255, 255, 255, 0.4);
    background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
  }

  .orange-border {
    border: 1px solid;
    border-image: linear-gradient(180deg,
        rgba(255, 128, 0, 0.6),
        rgba(255, 128, 0, 0)) 1 1;
    background: linear-gradient(to left, #ff8000, #ff8000) left top no-repeat,
      linear-gradient(to bottom, #ff8000, #ff8000) left top no-repeat,
      linear-gradient(to left, #ff8000, #ff8000) right top no-repeat,
      linear-gradient(to bottom, #ff8000, #ff8000) right top no-repeat,
      rgba(255, 255, 255, 0.4);
    background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
  }

  .blue-border {
    border: 1px solid;
    border-image: linear-gradient(180deg,
        rgba(0, 111, 255, 0.6),
        rgba(0, 111, 255, 0)) 2 2;
    background: linear-gradient(to left, #006fff, #006fff) left top no-repeat,
      linear-gradient(to bottom, #006fff, #006fff) left top no-repeat,
      linear-gradient(to left, #006fff, #006fff) right top no-repeat,
      linear-gradient(to bottom, #006fff, #006fff) right top no-repeat,
      rgba(255, 255, 255, 0.4);
    background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
  }
}
</style>
